<template>
  <h2>角色管理</h2>
  <div style="text-align: left">
    <el-button type="primary" @click="openRoleDialog">添加角色</el-button>
  </div>
  <el-table :data="rolerList" stripe style="width: 100%">
    <el-table-column prop="id" label="编号" width="180"/>
    <el-table-column  label="角色" width="260">
      <template #default="scope">
        <el-input v-if="scope.row.edit" v-model="scope.row.rname"></el-input>
        <span v-else>{{ scope.row.rname }}</span>
      </template>

    </el-table-column>
    <el-table-column label="描述">
      <template #default="scope">
        <el-input v-if="scope.row.edit" v-model="scope.row.rdesc"></el-input>
        <span v-else>{{ scope.row.rdesc }}</span>
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #header>
        <span>操作</span>
      </template>
      <template #default="scope">
        <el-button v-if="!scope.row.edit" size="mini"
                   @click="handleEdit(scope.row)">编辑</el-button>
        <el-button v-else size="mini" type="success"
                   @click="handleSave(scope.row)">保存</el-button>
        <el-button @click="deleteRoler(scope.row.id)">删除</el-button>
        <el-button @click="roleAndMenus(scope.row.id)">授权</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <hr/>
  <el-pagination
      small
      background
      :page-size="3"
      :pager-count="10"
      layout="prev, pager, next"
      :total="total"
      class="mt-4" @current-change="rolerPageChange"/>
  <!-- 角色信息对话框 -->
  <!-- 回显客户信息的对话框 -->
  <el-dialog
      v-model="dialogRoleVisible"
      width="80%"
  >
    <h2>角色信息</h2>

    <!-- 对话框中添加form -->
    <el-form :model="rolerForm" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="rolerForm.rname" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="rolerForm.rdesc" style="width: 80%"/>


      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveRoleForm">保存</el-button>
        <el-button @click="dialogRoleVisible=false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

  <!-- 角色授权对话框 -->
  <el-dialog
      v-model="dialogRoleMenusVisible"
      width="50%"
  >
    <h2>角色授权</h2>
    <!--  添加tree组件  -->
    <el-tree
        :props="props2"
        :data="treeNodeList2"
        show-checkbox
        default-expand-all
        node-key="id"

        ref="treeRef"/>
    <!-- 添加按钮组件   -->
    <el-button type="primary" @click="saveRolesMenus">保存权限</el-button>
    <el-button type="success" @click="dialogRoleMenusVisible=false">关闭授权</el-button>

  </el-dialog>

</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import { request } from '../utils/request'
import {ElMessage} from "element-plus";
//定义角色集合列表数据
const rolerList=ref([]);
const total=ref(0);
const dialogRoleMenusVisible=ref(false);
//发送请求加载角色列表
function queryRoleList(pageNum){
  request({ url: `http://localhost:8081/rolerList?pageNum=${pageNum}`, method: 'get' })
      .then((response)=>{
        rolerList.value=response.data.rolerList;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
              });
}

//加载页码调用函数
onMounted(function(){
  queryRoleList(1);
})
//定义分页按钮函数
function rolerPageChange(pageNum){
  queryRoleList(pageNum);
}
//定义函数实现表格编辑效果
function handleEdit(row){
  row.edit=true;
}
//定义函数实现编辑后保存
function handleSave(row){
  request({ url: 'http://localhost:8081/updateRoler', method: 'post', data: row })
      .then((response)=>{
        if(response.data.code==200){
          row.edit=false;
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      });
}
//////////////////////////////////////////////////////
//定义对话框状态
const dialogRoleVisible=ref(false);
//定义form表单
const rolerForm=reactive({
  rname:'',
  rdesc:''
});
//定义打开添加角色信息的对话框
function openRoleDialog(){
  dialogRoleVisible.value=true;
}
//定义函数提交角色信息保存的ajax请求
function  saveRoleForm(){
  request({ url: 'http://localhost:8081/saveRoler', method: 'post', data: rolerForm })
      .then((response)=>{
        if(response.data.code==200){
          dialogRoleVisible.value=false;
          rolerForm.rname='';
          rolerForm.rdesc='';
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      })
}
function deleteRoler(id){
  request({ url: `http://localhost:8081/deleteRoler/${id}`, method: 'get' })
      .then((response)=>{
        if(response.data.code==200){
          //刷新列表
          queryRoleList(1);
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      })
}
///////////////////////////////////////授权/////////////////////////////////////
//tree控件参数配置
const props2={
  id:'id',
  label:'label',
  children:'subMenus'
};
//定义授权树节点集合数据
const treeNodeList2=ref([]);
//定义树对象的引用
const treeRef=ref(null);
//声明变量保存角色id，在完成授权的时候使用
var global_rid=0;
//定义函数打开角色授权对话框
function roleAndMenus(rid){
  global_rid=rid;
  dialogRoleMenusVisible.value=true;
  //发送ajax请求获得树节点数据
  request({ url: 'http://localhost:8081/listMenus', method: 'get' })
      .then((response)=>{
        treeNodeList2.value=response.data;
        //发送ajax请求，根据角色id，获得所有该角色对应的菜单id
        request({ url: `http://localhost:8081/loadRoleMid/${rid}`, method: 'get' })
            .then((response)=>{
              treeRef.value.setCheckedKeys(response.data);
            })
            .catch((error)=>{
              console.log(error);
            })
      })
      .catch((error)=>{
        console.log(error);
      })
}
//定义实现角色菜单关闭保存的函数
function saveRolesMenus(){
  //获得tree控件中被选中的节点,包含父节点
  var nodes = treeRef.value.getCheckedNodes(false,true);
  //声明数组
  var arr=[global_rid];
  nodes.forEach((item)=>{
    arr.push(item.id);
  });
  console.log(arr)
  request({ url: 'http://localhost:8081/grantRoleMenus', method: 'post', data: arr })
      .then((response)=>{
        if(response.data.code==200){
          //关闭对话框
          dialogRoleMenusVisible.value=false;
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      })
}
</script>

<style scoped>

</style>